使用ARCore制作Portal Painter

Google发布了支持Android设备的ARCore SDK，Unity也同时推出了支持ARCore的测试版Unity 2017.2b9。Portal Painter是艺术家们创作中最喜欢的原型之一。它允许你在身边的表面上涂鸦，从而产生不同的艺术创作。今天我们将介绍一名Jane Friedhoff的开发者使用ARCore制作Portal Painter的过程。

下文中将介绍一下使用Unity和ARCore开发Portal Painter的过程，可以在这一过程中学到的一些技巧和经验。项目开始的设置性工作请参考《Unity支持ARCore》一文。ARCore已帮开发者们完成了主要的工作，涉及相关的Unity概念都非常基本。现在让我们开始吧！

注意：本文中所涉及的源代码请点击【阅读原文】，访问Unity中文技术社区(unitychina.cn) 下载。

构思

开始介绍ARCore之前，Jane Friedhoff先花了一些时间研究其他的VR/AR实验。并被那些好玩而抽象的想法所吸引，这些想法较少关注精确性与现实性，而是更多的考虑将数字与物理世界进行结合的创造性潜力。

许多AR演示创造了通往其他世界的传送门。Jane Friedhoff喜欢它们的超现实主义，但注意到其中中的大多数都只专注于进入另一个世界的行为，传送门本身通常是静态对象。那么，创造动态传送门的过程能否更加有创造性和快乐吗？能让人们自己绘制传送门吗？

受到其它的实验启发，Jane Friedhoff思考到：如果我们能使用AR画出新的位置会如何呢？你会在你的卧室天花板或办公室墙面上画什么呢？人们如果可以在他们的世界中涂鸦出新世界，擦掉他们原来世界的表面，露出下方充满惊喜的东西，这将会创造怎样的一种喜悦呢？

就这样，Portal Painter诞生了！

开发

1

通用代码

开始深入ARCore之前，工作过程的大体框架，分四个核心部分：

• 一个摄像机，位于其中一个梦幻世界中，用于将该世界的视图渲染成一个2D纹理。

• 一个不可见的四边形，作为画布，用于用户绘制，以便了解在何处揭开另一个世界。

• 一个着色器，可以将以上两个视图合成到同一个纹理，并处理其他可视效果。

• 一个父对象，将合成的纹理显示到真实世界中的正确位置。

基本功能如下：

当在虚拟世界工作正常之后，就可以使用ARCore将这些传送门放入真实世界了！

2

定位

我们首先要做的是让传送门感觉像是在你所在的空间并位于身边的物体之上。我们可以将它们简单的每次都丢在某些与摄像机保持固定距离的位置，但我们都认同，能将窗口绘制到你的墙上、桌上或地板上才是真正的乐趣所在，就像你正在侵蚀表面并显露出下面神奇的东西。

我们必须确定传送门的位置。这意味着要确定用户的触摸与真实世界表面的接触点，如果有，找到那个点。通常在游戏开发中，我会通过摄像机的射线投射（raycasting）在虚拟世界中放置对象，并查看射线是否与3D世界中任何感兴趣的对象相交。对于AR而言 ，我使用TrackableHit和Session类，它们可用来对现实世界的对象进行射线投射：

TrackableHitFlag表明我们希望获得所有相关TrackedPlanes和当前帧的点云中的所有相关点（后面会展示这个标志的重要性）的射线投射数据。返回的TrackableHit，除了其他东西之外，还包含了它的位置（Unity世界坐标）。我们使用这个数据在表面上的正确位置实例化（instantiate）我们的传送门。

3

方向

所以，现在我们已有了位置信息，那么旋转信息呢？我们希望尽可能模仿在地板、墙壁或其他表面进行绘制的感觉，如果我们只能不停的在地板绘制直立的传送门，或在墙上弄出个扁平的传送门那就行不通了。

要将传送门的方向与表面完美结合，我们需要将传送门放在正确的位置，并旋转到位，这样它才能与表面齐平。一种实现方式是，获得平面的法线（与其表面垂直的矢量），并将传送门的方向与其匹配。但复杂的是，ARCore和其他许多AR SDKs一样，只支持平面检测，即地板和桌面。垂直的特征，如墙壁，被视为点云的一部分，而非平面。因此，他们没有真正的法线值。那么我们该如何解决这个问题呢?

看着大家玩Portal Painter，我注意到，当他们在墙上作画时，通常是正面朝上，而非从一个角度。这意味着大多数时候，我们可以假设垂直传送门的正确朝向就是正对摄像机。因此，我们针对水平传送门，可以结合平面法线，对垂直传送门，则使用“正对摄像机”，这能取得很不错的效果。

传送门的初始位置确定后，用户可以从任意角度继续作画。ARCore会保证所有的东西都在合适的位置，允许用户像平常一样四处走动和窥视，而绘画的抽象性和另一个世界会在方向稍微偏离时起到模糊的作用。

一个快速取巧的函数来应对两种情况：

这能出奇理想的将水平面和垂直点结合到一起，使人们在作画时不会有任何违和感。

结语

你可以在AR experiments website看到Portal Painter以及其它好玩的原型。我们将会介绍更多关于ARCore的信息，现在就开始使用Unity 和ARCore进行开发吧。

想自己试试Portal Painter？请点击【阅读原文】，访问Unity中文技术社区(unitychina.cn) 下载。

最后，祝大家中秋快乐！

推荐阅读

点击“阅读原文”进入Unity官方中文社区！